<%--
  Created by IntelliJ IDEA.
  User: Cc
  Date: 2020/12/30
  Time: 16:51
  To change this template use File | Settings | File Templates.
--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="<%=basePath%>static/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="<%=basePath%>static/css/font.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/xadmin.css">
    <link rel="stylesheet" href="<%=basePath%>static/lib/layui/layui.css">
    <script type="text/javascript" src="<%=basePath%>static/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/xadmin.js"></script>
    <style>
        .layui-form-checkbox[lay-skin=primary]{
            padding-left: 0px;
        }
    </style>
</head>
<body>
<div class="x-body">
    <form class="layui-form">
        <div class="layui-form-item">
            <label for="username" class="layui-form-label">
                <span class="x-red">*</span>用户名
            </label>
            <div class="layui-input-inline">
                <input type="text" id="username" name="username"
                       autocomplete="off" class="layui-input" placeholder="请输入用户名">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="password" class="layui-form-label">
                <span class="x-red">*</span>密&emsp;码
            </label>
            <div class="layui-input-inline">
                <input type="password" id="password" name="password"
                       autocomplete="off" class="layui-input" placeholder="请输入密码">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="roles" class="layui-form-label">
                身&emsp;份
            </label>
            <div class="layui-input-inline">
                <input type="checkbox" name="role" id="roles"
                       title="普通用户" value="普通用户" lay-skin="primary" checked>
                <input type="checkbox" name="role" title="管理员" value="管理员" lay-skin="primary">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="phone" class="layui-form-label">
                <span class="x-red">*</span>手机号
            </label>
            <div class="layui-input-inline">
                <input type="tel" id="phone" name="phone"
                       autocomplete="off" class="layui-input" placeholder="请输入手机号码">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="email" class="layui-form-label">
                邮&emsp;箱
            </label>
            <div class="layui-input-inline">
                <input type="email" id="email" name="email"
                       autocomplete="off" class="layui-input" placeholder="请输入邮箱">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="birthday" class="layui-form-label">
                生&emsp;日
            </label>
            <div class="layui-input-inline">
                <input type="date" id="birthday" name="birthday"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
            </label>
            <button class="layui-btn" id="L_repass" type="button">
                添加
            </button>
        </div>
    </form>
</div>
<%--<script type="text/javascript" src="<%=basePath%>static/lib/layui/__unpkg.com_layui@2.7.6_dist_layui.js"></script>--%>
</body>
<script>
    let check = 0;
    // 监听用户名输入，查询是否重复
    $(document).ready(function() {
        // 给输入框添加失去焦点事件监听器
        $('#username').blur(function() {
            // 获取输入框的值
            var username = $(this).val();
            // 发送Ajax请求
            $.ajax({
                url: '/user/enrollCheck',  // 后端接口地址
                method: 'POST',
                data: { username: username },  // 发送的数据，这里是用户名
                success: function(response) {
                    // console.log(response);
                    // 处理后端返回的结果
                    if (response != null) {
                        check = response.code;
                        $('#result').text(response.message);
                    }
                    // else {
                    //     $('#result').text('用户名可用');
                    // }
                },
                error: function() {
                    $('#result').text('请求出错');
                }
            });
        });
    });
    // 检查必输入的项是否不合法，然后调用增加方法
    $(document).on('click', '#L_repass', function() {
        var username = $("#username").val;
        var password = $("#password").val;
        var phone = $("#phone").val();
        if(username == null || username == undefined || username == ''){
            alert("用户名不合法");
            return;
        }
        if(phone == null || phone == undefined || phone == ''){
            alert("电话不合法");
            return;
        }
        if(password == null || password == undefined || password == ''){
            alert("密码不合法");
            return;
        }
        submit();
    });
    // 请求增加用户的方法
    function submit(){
        if(check <= 0 ){
            alert("用户名不合法，请重新输入!");
            return;
        }
        // 获取到角色
        let checkboxes = document.getElementsByName("role");
        let selectedRoles = [];
        for (let i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked) {
                selectedRoles.push({
                    rolename:checkboxes[i].value
                });
            }
        }
        let user = {
            username: $("#username").val(),
            password: $("#password").val(),
            phone: $("#phone").val(),
            email: $("#email").val(),
            birthday: $("#birthday").val(),
            roles: selectedRoles
        };
        // let jsonUser = JSON.stringify(user);
        // console.log(jsonUser);
        // console.log(typeof(jsonUser));
        $.ajax({
            url: "/user/addUser",
            type: "post",
            datatype: "json",
            contentType: "application/json",
            data: JSON.stringify(user),
            success: function (data){
                layer.msg('添加用户成功! ', {icon: 1});
                setTimeout(function(){
                    window.parent.location.reload();//刷新父页面
                    parent.layer.close(layer.index);//关闭弹出层
                }, 800);
            },
            error: function (data){
                layer.msg('请求失败! ', {icon: 2});
            }
        })
    }
</script>
</html>